<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- bootstrap样式、主题、核心文档 -->
<link rel="stylesheet" href="libs/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="libs/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="libs/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<style type="text/css">
	.jumbotron{
		height:400px;
	}
	.btn.btn-info{
		width:300px;
		font-size: 20px;
	}
	.inner{
		float:left;
		height:300px;
		
		
	}
	#inner2{
		background-color: white;
	}
	
	.container{
		margin-left: 0;
		margin-right: 0;
		width:100%;
	}
	p>span{
		display:inline-block;
		width:100px;
	}
</style>
</head>
<body>
<div class="jumbotron container">
		<div style="width:100%; text-align: center" class="inner container">
		<form class="form-inline">
		<p><span>用户名</span><input type="text" class="form-control"  placeholder="输入用户名" style="width:200px;" name="username"></p>
		<p><span>密码</span><input type="password" class="form-control"  placeholder="输入密码" style="width:200px;" name="password">
		</p>
	 	<p><button type="button" class="btn btn-info">登录</button></p>
		</form>
	</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$("button").on("click",function(){
				var dataForm = $("form").eq(0).serialize();
				alert(dataForm);
				$.ajax({
					type:"post",
					url:"LoginServlet",
					data:dataForm,
					dataType:"json",
					success:function(result){
						alert(result.flag+" "+result.message);
						
						if(result.flag==true){
							//使用el表达式获取session中的user信息
							
						}else{
							//登录失败
							alert(result.message);
							location.reload();
						}
					}
				});
				
			});
			
			
			
		})
	
	
	</script>
</body>
</html>